<template>
  <div class="box">
    <div>
      <ul class="dasai">
        <li v-for="(item, index) in this.dasai" :key="index">
          <router-link :to="`/canjia/${index}`">
            <div><img :src="item.image" :dasai="dasai" alt="" srcset="" /></div>
            <p>
              <span :class="item.state == 1 ? '' : 'jieshu'">{{
                item.span
              }}</span>
              {{ item.p }}
            </p>
          </router-link>
        </li>
      </ul>
      <div class="chakan" @click="chakan"><h4>查看更多</h4></div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      dasai: [
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4312066.jpg",
          span: "进行中",
          state: 1,
          p: "青年新声代主题歌会",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4293042.jpg",
          span: "进行中",
          state: 1,
          p: "测试朗诵大赛",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4326081.jpg",
          span: "进行中",
          state: 1,
          p: "瓜的测试大赛",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4332366.jpg",
          span: "进行中",
          state: 1,
          p: "520K歌告白季-邀你唱出心中的爱",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4333384.jpg",
          span: "进行中",
          state: 1,
          p: "带你走进Tank的金曲时代",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4334638.jpg",
          span: "进行中",
          state: 1,
          p: "张靓颖邀你合唱《暗恋》",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4334771.jpg",
          span: "进行中",
          state: 1,
          p: "K歌音乐不停，运动锻炼不止",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4234789.jpg",
          span: "已结束",
          state: 0,
          p: "全民K歌X索尼音乐特别企划-全民星合唱",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4234789.jpg",
          span: "已结束",
          state: 0,
          p: "全民K歌X索尼音乐特别企划-全民星合唱",
        },
      ],
      beiyong: [
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4268955.jpg",
          span: "已结束",
          state: 0,
          p: "和过去对话",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4235430.jpg",
          span: "已结束",
          state: 0,
          p: "“带偏你”挑战1.0 ",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4247259.jpg",
          span: "已结束",
          state: 0,
          p: "K歌女神节-我们“声”而不凡",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4243828.jpg",
          span: "已结束",
          state: 0,
          p: "敢试 新声",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4252035.jpg",
          span: "已结束",
          state: 0,
          p: "《闪光的乐队》 热歌挑战",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_new_task_frame/4254673.jpg",
          span: "已结束",
          state: 0,
          p: "打工人通勤歌单翻唱大赛",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4255220.jpg",
          span: "已结束",
          state: 0,
          p: "中华民歌挑战赛",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4255228.jpg",
          span: "已结束",
          state: 0,
          p: "复古回潮计划 一首歌回到千禧年",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4255778.png",
          span: "已结束",
          state: 0,
          p: "春天的分贝-翻唱大赛",
        },
      ],
      num: 0,
    };
  },
  methods: {
    chakan() {
      let newarr = this.beiyong.splice(this.num, 9);
      this.dasai = [...this.dasai, ...newarr];
    },
    atc(e) {
      console.log(1);
    },
  },
};
</script>

<style scoped>
.dasai {
  display: flex;
  flex-wrap: wrap;
}
.dasai li {
  width: 33.33%;
  margin-bottom: 30px;
}
.dasai a {
  display: block;
  margin: 0 30px;
  transition: all 0.3s;
}
.dasai a div {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 50%;
  overflow: hidden;
}
.dasai a div img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  transition: all 0.75s cubic-bezier(0, 1, 0.75, 1);
}
.dasai a:hover img {
  transform: scale(1.07);
}
.dasai a:hover p {
  color: #fc1717;
}
.dasai p {
  display: block;
  padding-top: 10px;
  font-size: 16px;
  color: #000;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}
.dasai span {
  display: inline-block;
  width: 44px;
  height: 18px;
  font-size: 12px;
  color: #fff;
  background-color: #fc1717;
  line-height: 18px;
  text-align: center;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: 1px;
}
.dasai .jieshu {
  background-color: #999;
}
.chakan {
  clear: both;
  text-align: center;
  padding: 20px 0;
}
.chakan h4 {
  font-size: 14px;
  color: #a3a3a3;
  font-weight: 400;
  cursor: pointer;
}
</style>